import React from 'react'
import { withRouter, Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Table, Tabs, Button, Modal, Carousel, Icon } from 'antd'
import PopoverTitle from 'component/common/PopoverTitle'
import Card from 'component/common/Card'
import { WORK_STATUS_NAME, PAGE_SIZE } from 'common/config'
import { getTableColumn, isEmpty } from 'common/util'
import styles from './LedgerDetail.styl'

const { TabPane } = Tabs

const BASIC_FIELDS = [
    { field: 'workNo', name: '工单编号' },
    { field: 'id', name: '工作票票号' },
    { field: 'separateNo', name: '隔离申请号' },
    { field: 'equipmentLocation', name: '设备功能位置' },
    { field: 'wcd', name: '关联WCD' },
    { field: 'crewNo', name: '机组号' },
    { field: 'workLocation', name: '工作地点' },
    { field: 'workContent', name: '工作内容' },
    { field: 'workCenter', name: '工作中心' },
    { field: 'riskTip', name: '风险提示' },
    { field: 'workOwner', name: '工作负责人' },
    { field: 'workStatus', name: '工作票状态', render: val => WORK_STATUS_NAME[val] },
    { field: 'planWorkStartTime', name: '计划开始' },
    { field: 'planWorkEndTime', name: '计划结束' },
    { field: 'realStartTime', name: '实际开始时间' },
    { field: 'realEndTime', name: '实际结束时间' },
]

// 确认项类型 1-工作地点 2-设备功能位置 3-隔离边界确认
const CONFIRM_TYPES = [undefined, '工作地点', '设备功能位置', '隔离边界确认']

class Issue extends React.Component {
    state={
        loading: false,
    }

    componentDidMount() {
        this.requestDetail()
    }

    getColsOfConfirm = () => [
        ['确认项类型', 'confirmType', 120, val => CONFIRM_TYPES[val]],
        ['确认项描述', 'confirmDescripe', undefined, val =>
            <PopoverTitle content={val}>{val}</PopoverTitle>, 'text-overflow'],
        ['是否确认', 'isDrCode', 120, val => ([undefined, '是', '否'][val]), 'col-sort'],
        ['确认时间', 'confirmTime', 160, undefined, 'col-sort'],
    ].map(col => getTableColumn(...col))

    getColsOfRecord = () => [
        ['数据记录项编号', 'id', 160, undefined, 'col-sort'],
        ['数据项名称', 'repairItem', undefined, val =>
            <PopoverTitle content={val}>{val}</PopoverTitle>, 'text-overflow'],
        ['记录类型', 'repairType', 120, val => ([undefined, '正常', '异常'][val]), 'col-sort'],
        ['结果', 'repairResult', undefined, val =>
            <PopoverTitle content={val}>{val}</PopoverTitle>, 'text-overflow'],
        ['单位', 'unit', 100],
        ['异常图片', undefined, 100, (v, { id }) => (
            <Button onClick={this.handleClickShowErrImg.bind(this, id)}>查看</Button>
        )],
        ['录入时间', 'createTime', 160, undefined, 'col-sort'],
    ].map(col => getTableColumn(...col))

    handleClickShowErrImg = id => {
        this.props.dispatch('devops.errorImg', { id }).then(({ remark, urls }) =>
            this.showImgModal('异常记录', urls, remark))
    }

    handleClickShowRecordImg = () => {
        const {
            dispatch,
            match: { params: { id } },
        } = this.props
        dispatch('devops.recordImg', { id }).then(list =>
            this.showImgModal('图像记录', list))
    }

    showImgModal = (title, list, remark) => {
        Modal.info({
            title,
            className: styles.modal,
            content: (
                <div>
                    {remark && <div className={styles.remark}>{remark}</div>}
                    {Array.isArray(list) && list.length > 0 ? (
                        <Carousel className={styles.carousel} autoplay={false}>
                            {list.map(img => (<div key={img}><img src={img} alt="" /></div>))}
                        </Carousel>
                    ) : <div className={styles.none}>暂无图片</div>}
                </div>
            ),
        })
    }

    requestDetail = () => {
        const {
            dispatch,
            match: { params: { id } },
        } = this.props
        this.setState({ loading: true })
        Promise.all([
            dispatch('devops.detail', { id }),
            dispatch('devops.confirmList', { workId: id }),
            dispatch('devops.recordList', { workId: id }),
        ]).then(() => {
            this.setState({ loading: false })
        })
    }

    render() {
        const { loading } = this.state
        const {
            confirmList = [],
            recordList: { repairItems = [] } = {},
            detail = {},
        } = this.props

        return (
            <div className={styles.main}>
                <div className={styles.header}>
                    <Button type="primary" onClick={this.handleClickShowRecordImg} style={{ marginRight: 20 }}>查看图像记录</Button>
                    <Link to="/ledger" className={styles.back}><Icon type="left" />返回</Link>
                </div>
                <Card title="工作票基础信息" loading={loading}>
                    {BASIC_FIELDS.map(({ field, name, render = val => (isEmpty(val) ? '暂无' : val) }) => (
                        <div key={field} className={styles.card_item}>
                            <label>{name}：</label>
                            <span>{render(detail[field])}</span>
                        </div>
                    ))}
                </Card>
                <Card className={styles.tabs}>
                    <Tabs>
                        <TabPane tab="现场确认项" key="confirm">
                            <Table
                                className={styles.table}
                                rowKey="id"
                                columns={this.getColsOfConfirm()}
                                dataSource={confirmList}
                                loading={loading}
                                onChange={this.handleTableChange}
                                pagination={{
                                    showQuickJumper: true,
                                    pageSize: PAGE_SIZE,
                                }}
                            />
                        </TabPane>
                        <TabPane tab="数据记录项" key="record">
                            <Table
                                className={styles.table}
                                rowKey="id"
                                columns={this.getColsOfRecord()}
                                dataSource={repairItems}
                                loading={loading}
                                onChange={this.handleTableChange}
                                pagination={{
                                    showQuickJumper: true,
                                    pageSize: PAGE_SIZE,
                                }}
                            />
                        </TabPane>
                    </Tabs>
                </Card>
            </div>
        )
    }
}

export default withRouter(connect(state => ({
    ...state.app,
    ...state.devops,
}))(Issue))
